<template>
  <el-dialog
    :visible.sync="show"
    width="570px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    custom-class="capital-flow"
  >
  <div slot="title" class="title_close">
      <!-- 预警 -->
      <div class="title">{{$t('account_dialog.capital_flow.56hr0o2ka5c0')}}</div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="handleClose" />
    </div>
    <div class="search f-cb">
      <el-date-picker
        v-model="Dates"
        type="daterange"
        range-separator="-"
        :start-placeholder="$t('account_dialog.capital_flow.56hr0o2kbac0')"
        :end-placeholder="$t('account_dialog.capital_flow.56hr0o2kblc0')"
        :picker-options="pickerOptions"
        :unlink-panels="true"
        @change="pickerChange"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        popper-class="pickerSelect"
      >
      </el-date-picker>
      <el-select v-model="submit.accountType" @change="select" :placeholder="$t('account_dialog.capital_flow.56hr0o2kbu80')" class="total_account">
        <el-option
          v-for="item in AccountList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="submit.type" @change="select" :placeholder="$t('account_dialog.capital_flow.56hr0o2kc6o0')">
        <el-option
          v-for="item in TypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <ul
      class="lists f-cb"
      v-infinite-scroll="load"
      infinite-scroll-disabled="loading"
      infinite-scroll-delay="200"
      infinite-scroll-distance="15"
    >
      <li v-for="(item, index) in tableData" :key="index">
        <div class="timer">{{ item.createTime | timestampToTime }}</div>
        <h2>
          {{ item.desc }}
          <span
            class="changeAmount fr"
            :class="item.changeAmount == 0 ? 'on' : ''"
            >{{ item.changeAmount > 0 ? "+" : "" }}
            <i>{{Number(item.changeAmount).toFixed(2) | formatNumberRgx}}</i></span
          >
        </h2>
        <div v-if="item.type == 1">
          <!-- 兑换前 -->
          <p>
            {{$t('account_dialog.capital_flow.56hr0o2kqhu0')}}：
            <i>{{Number(item.fromBefore) | formatNumberRgx}}</i>{{item.fromCurrency}}, {{
              item.toBefore | formatNumberRgx
            }}{{ item.toCurrency }}
          </p>
          <!-- 兑换后 -->
          <p>
            {{$t('account_dialog.capital_flow.56hr0fo2kuo0')}}：<i>{{Number(item.fromAfter) | formatNumberRgx}}</i>{{ item.fromCurrency }}, {{ item.toAfter | formatNumberRgx
            }}{{ item.toCurrency }}
          </p>
          <!-- 新股认购，融资融券没有手续费，手续费为0不显示 -->
          <p v-if="(item.type != 10 || item.type != 11) && Number(item.fee) != 0">
            {{$t('account_dialog.capital_flow.56hr0wo2huo0')}}：{{ item.fee }}
          </p>
        </div>
        <div v-else>
          <p>
            {{ item.type == 5 ? $t('account_dialog.capital_flow.56hr0o2kcg80') : $t('account_dialog.capital_flow.56hr0o2kcp00') }}：
            <span>{{item.tradeAmount | formatNumberRgx}}</span>
            <!-- 现金余额 -->
            <span class="fr">{{$t('account_dialog.capital_flow.56hr0co2huo0')}}：<i>{{Number(item.after) | formatNumberRgx}}</i></span>
          </p>
          <p class="currency">
            <span v-if="item.type != 5 && Number(item.fee) != 0"
              >{{$t('account_dialog.capital_flow.56hr0wo2huo0')}}：{{ item.fee }}</span
            >
            <!-- 币种 -->
            <span class="fr">{{$t('account_dialog.capital_flow.56hr02khbuo0')}}：{{ item.currency }}</span>
          </p>
        </div>
      </li>
      <p v-if="loading && !noMore" class="more">{{ $t("m.Loading") }}</p>
      <p v-if="noMore" class="more">{{ $t("m.No_more") }}</p>
    </ul>
  </el-dialog>
</template>
<script>
import {get_asset_record, get_asset_master} from '@/assets/js/API/order.js';
import dayjs from "dayjs";
export default {
  props: ["show", "type"],
  data() {
    return {
      submit: {
        accountType: "", //1:A股通 2:港股 3:美股 不传即所有
        startDate: "",
        endDate: "",
        type: "",
        page: 1,
        pageSize: 20,
      },
      AccountList: [
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kbu80'),
          value: "",
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kcxk0'),
          value: 2,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kd6c0'),
          value: 3,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr02tkhuo0'),
          value: 1,
        },
      ],
      TypeList: [
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kc6o0'),
          value: "",
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kdf00'),
          value: 1,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kdn00'),
          value: 2,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kdvg0'),
          value: 3,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2ke3k0'),
          value: 4,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kec80'),
          value: 5,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kekk0'),
          value: 6,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kevw0'),
          value: 7,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kf5k0'),
          value: 10,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kfe80'),
          value: 11,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kgq80'),
          value: 13,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2kh4k0'),
          value: 14,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2khfo0'),
          value: 15,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2khmw0'),
          value: 16,
        },
        {
          label: this.$t('account_dialog.capital_flow.56hr0o2khuo0'),
          value: 17,
        },
      ],
      Dates: [],
      loading: true,
      noMore: false,
      tableData: [],
      tableHeight: 20,
      IsOpen: 4,
      pickerOptions: {
        disabledDate(time) {
          const end = new Date();
          return time.getTime() >= end;
        }, // 时间选择器范围为最多为本日
      },
    };
  },
  mounted() {
    this.initTime();
    this.initCharge();
    // this.getCapitalList();
    this.IsOpen = sessionStorage.getItem("isOpen");
    this.getMasterAccount();
  },
  methods: {
    // 初始化时间，默认三个月
    initTime() {
      let time = new Date();
      this.submit.startDate = dayjs(
        time.getTime() - 3600 * 1000 * 24 * 90
      ).format("YYYY-MM-DD");
      this.submit.endDate = dayjs(time.getTime()).format("YYYY-MM-DD");
      this.Dates = [this.submit.startDate, this.submit.endDate];
    },
    load() {
      console.log(this.tableHeight, "_this.tableHeight");
      if (this.tableHeight >= 20) {
        this.loading = true;
        this.submit.page++;
        this.getCapitalList();
      }
    },
    handleClose() {
      this.submit = {
        accountType: "", //1:A股通 2:港股 3:美股 不传即所有
        startDate: "",
        endDate: "",
        type: "",
        page: 1,
        pageSize: 20,
      };
      this.tableData = [];
      this.loading = true;
      this.noMore = false;
      this.submit.page = 1;
      this.initTime();
      this.initCharge();
      this.$emit("close", "capitalflowshow");
    },
    async getMasterAccount() {
      if (this.IsOpen == 0 || this.IsOpen == 2 || this.IsOpen == 3) return;
      const res = await get_asset_master({
          currency: "HKD",
        });
      if (res.code != 1) return this.$message.error(res.msg);
      this.AccountList[1].label = `${this.AccountList[1].label}(${res.data.HKStock.openNum})`;
      this.AccountList[2].label = `${this.AccountList[2].label}(${res.data.USStock.openNum})`;
      this.AccountList[3].label = `${this.AccountList[3].label}(${res.data.AStock.openNum})`;
    },
    // 选择切换时间
    pickerChange(val) {
      this.submit.startDate = val[0];
      this.submit.endDate = val[1];
      this.tableData = [];
      this.loading = true;
      this.noMore = false;
      this.submit.page = 1;
      //console.log(this.submit,'submit.startDate')
      this.getCapitalList();
    },
    async getCapitalList() {
      if (!this.noMore) {
        const res = await get_asset_record(this.submit);
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.length > 0) {
          this.tableData = [...this.tableData, ...res.data.list];
          this.submit.page++;
        } else {
          this.noMore = true;
        }
        this.loading = false;
      }
    },
    load() {
      this.loading = true;
      this.getCapitalList();
    },
    // async getCapitalList() {
    //   var _this = this;
    //   if (_this.loading) {
    //     console.log(this.submit,"列表数据")
    //     _this.$axios
    //       .get("/api/capital_flow/index", { params: _this.submit })
    //       .then(function (res) {
    //         if (res.code == 1) {
    //           _this.tableData = [..._this.tableData, ...res.data.list];
    //           _this.tableHeight = res.data.list.length;
    //           //console.log(_this.tableHeight,'_this.tableHeight')
    //           _this.loading = false;
    //         } else {
    //           _this.$message({
    //             message: response.data.msg,
    //             type: "warning",
    //           });
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //   }
    // },
    // 初始化默认股票市场
    initCharge() {
      // 1: A股通, 2：港股，3：美股
      this.submit.accountType = this.accountType;
      // if(this.accountType == 1) this.submit.accountType = this.AccountList[3].value;
      // else if(this.accountType == 2) this.submit.accountType = this.AccountList[1].value;
      // else if(this.accountType == 3) this.submit.accountType = this.AccountList[2].value;
      // else this.submit.accountType = this.AccountList[0].value;
      // console.log("this",this.accountType,this.AccountList[1].value)
    },
    // 选择分类事件
    select() {
      this.submit.page = 1;
      this.loading = true;
      this.noMore = false;
      this.tableData = [];
      this.getCapitalList();
    }
  },
  computed: {
    accountType() {
      return this.$store.state.index.accountType;
    }
  },
  watch: {
    accountType(val) {
      this.initCharge();
    }
  },
};
</script>
<style lang="less">
.capital-flow {
  padding-bottom: 30px;
  i{ font-style:normal}
  .el-dialog__title {
    font-size: 14px;
    color: @fff;
  }
  .search {
    width: 100%;
    padding-right: 16px;
    .el-range-editor.el-input__inner {
      padding: 0 10px;
      background: @bgColor;
      border: none;
      height: 30px;
      line-height: 30px;
      width: 215px;
    }
    .el-date-editor .el-range-input,
    .el-date-editor .el-range-separator {
      font-size: 12px;
      color: @fff;
      line-height: 30px;
      background: @bgColor;
    }
    .el-select {
      margin-left: 10px;
      .el-input__icon {
        line-height: 30px;
      }
    }
    .total_account.el-select .el-input__inner {
      width: 140px;
    }
    .el-select .el-input__inner {
      border: none;
      height: 30px;
      line-height: 30px;
      background: @bgColor;
      font-size: 12px;
      color: @fff;
      width: 130px;
    }
  }
  .lists {
    width: 100%;
    height: 500px;
    overflow: auto;
    margin-top: 25px;
    li {
      padding: 8px 16px 8px 0;
      border-bottom: 1px solid @LightBorderLine;
      .timer {
        font-size: 12px;
        color: @Dark_gray;
        line-height: 22px;
      }
      h2 {
        font-size: 14px;
        color: @fff;
        line-height: 24px;
        .changeAmount {
          color: @hoverColor;
        }
        .changeAmount.on {
          color: @fff;
        }
      }
      p {
        font-size: 12px;
        color: @fbSix;
        line-height: 22px;
      }
      .currency {
        height: 22px;
      }
    }
  }
  .el-loading-mask {
    background: none;
  }
}
// .el-date-range-picker.pickerSelect {
//   width: 454px;
//   background: @deepBg;
//   border: 1px solid @LightBorderLine;
//   .popper__arrow {
//     border-bottom-color: @LightBorderLine;
//   }
//   .popper__arrow::after {
//     border-bottom-color: @deepBg;
//   }
//   .el-date-range-picker__header div {
//     font-size: 14px;
//   }
//   .el-picker-panel__body {
//     min-width: 200px;
//     color: @fbSix;
//   }
//   .el-date-range-picker__content.is-left {
//     border-right: 1px solid @LightBorderLine;
//   }
//   .el-date-table th {
//     color: @fbSix;
//     padding: 0;
//     border-bottom: solid 1px @LightBorderLine;
//   }
//   .el-picker-panel__icon-btn {
//     color: @fbSix;
//   }
//   .el-date-table td {
//     padding: 0;
//   }
//   .el-date-table td.in-range div,
//   .el-date-table td.in-range div:hover,
//   .el-date-table.is-week-mode .el-date-table__row.current div,
//   .el-date-table.is-week-mode .el-date-table__row:hover div {
//     background-color: @bgColor;
//   }
// }
</style>